<!doctype html>
<meta charset="utf-8">
<title id="page-title"></title>
<link href="css/xstyle.css" rel="stylesheet" type="text/css" media="all" />
<script src="js/echarts.min.js" charset="utf-8"></script>
<script src="js/jquery.min.js" charset="utf-8"> </script>
<script src="js/axios.min.js"></script>
<script src="iconfont/iconfont.js"></script>
<script src="js/dataService.js?v1.05" charset="utf-8"></script>
<style>
</style>

<body>
  <!-- 顶部区域 -->
  <div class="bnt">
    <div class="topbnt_left fl">
      <ul>
        <li><a href="#">测试导航</a></li>
        <li><a href="#">测试导航</a></li>
        <li><a href="#">测试导航</a></li>
        <li><a href="#">测试导航</a></li>
      </ul>
    </div>
    <h1 id="header-title" class="tith1 fl"></h1>
    <div class=" fr topbnt_right">
      <ul>
        <li><a href="#">测试导航</a></li>
        <li><a href="#">测试导航</a></li>
        <li><a href="#">测试导航</a></li>
        <li><a href="#">测试导航</a></li>
      </ul>
      </ul>
    </div>
  </div>
  <!-- 中间主体区域 -->
  <div class="mid-wrap">
    <div class="mid-left-wrap">
      <div id="sales-out-wrap">
        <div class="area-title">
          <div class="area-title-icon">
            <svg class="x2-icon" aria-hidden="true">
              <use xlink:href="#icon-xiaoshou"></use>
            </svg>
          </div>
          <div class="area-title-band">
            <div class="title-hand-header"></div>
            <div class="title-band-main">
              <div class="title-band-text">销售统计排行</div>
            </div>
            <div class="title-hand-end"></div>
          </div>
        </div>
        <div class="base-in-wrap" style="background: none;">            
        </div>
      </div>
    </div>
    <div class="mid-mid-wrap">
      <div id="sendout-out-wrap">
        <div class="area-title">
          <div class="area-title-icon">
            <svg class="x2-icon" aria-hidden="true">
              <use xlink:href="#icon-fahuo"></use>
            </svg>
          </div>
          <div class="area-title-band">
            <div class="title-hand-header"></div>
            <div class="title-band-main">
              <div class="title-band-text">仓库发货单列表</div>
            </div>
            <div class="title-hand-end"></div>
          </div>
        </div>
        <div class="base-in-wrap" style="display: flex;padding-top:20px ;">         
        </div>
      </div>
    </div>
    <div class="mid-right-wrap">
      <div id="notes-out-wrap">
        <div class="area-title">
          <div class="area-title-icon">
            <svg class="x2-icon" aria-hidden="true">
              <use xlink:href="#icon-fenxi2-F"></use>
            </svg>
          </div>
          <div class="area-title-band">
            <div class="title-hand-header"></div>
            <div class="title-band-main">
              <div class="title-band-text">实时趋势</div>
            </div>
            <div class="title-hand-end"></div>
          </div>
        </div>
        <div class="base-in-wrap">
          111
        </div>
      </div>
    </div>
  </div>
  <!-- 底部区域 -->
  <div class="bottom-wrap">
    <div class="bottom-left-wrap">
      <div id="deptorder-out-wrap">
        <div class="area-title">
          <div class="area-title-icon">
            <svg class="x2-icon" aria-hidden="true">
              <use xlink:href="#icon-bumenguanli"></use>
            </svg>
          </div>
          <div class="area-title-band">
            <div class="title-hand-header"></div>
            <div class="title-band-main">
              <div class="title-band-text">部门订单比较</div>
            </div>
            <div class="title-hand-end"></div>
          </div>
        </div>
        <div class="base-in-wrap">
          <!-- <div class="dept-sort">
            <div class="dept-sort-item">1</div>
            <div class="dept-sort-item">2</div>
            <div class="dept-sort-item">3</div>
            <div class="dept-sort-item">4</div>
            <div class="dept-sort-item">5</div>
          </div> -->
          <div class="chart-container" id="deptorder-chart"></div>
        </div>
      </div>
    </div>
    <div class="bottom-mid-wrap">
      <div id="deptsendout-out-wrap">
        <div class="area-title">
          <div class="area-title-icon">
            <svg class="x2-icon" aria-hidden="true">
              <use xlink:href="#icon-bumenguanli"></use>
            </svg>
          </div>
          <div class="area-title-band">
            <div class="title-hand-header"></div>
            <div class="title-band-main">
              <div class="title-band-text">部门发货比较</div>
            </div>
            <div class="title-hand-end"></div>
          </div>
        </div>
        <div class="base-in-wrap">
          <div class="chart-container" id="deptsendout-chart"></div>
        </div>
      </div>
    </div>
    <div class="bottom-right-wrap">
      <div id="creater-out-wrap">
        <div class="area-title">
          <div class="area-title-icon">
            <svg class="x2-icon" aria-hidden="true">
              <use xlink:href="#icon-danju"></use>
            </svg>
          </div>
          <div class="area-title-band">
            <div class="title-hand-header"></div>
            <div class="title-band-main">
              <div class="title-band-text">制单人订单比较</div>
            </div>
            <div class="title-hand-end"></div>
          </div>
        </div>
        <div class="base-in-wrap">
          <div class="chart-container" id="creater-chart"></div>
        </div>
      </div>
    </div>
  </div>
</body>
<script type="text/javascript">
  function update() {
    const done = async (vp) => {
      const opts = await getOpt(vp)
      if (opts) { // 有配图表数据，就绘制图表
        const chart = echarts.init(document.getElementById(vp + "-chart"))
        chart.setOption(opts)
      }
      // 处理自定义的业务数据
      updateCustomer(vp, opts)
    }
    const vlist = ["sales", "sendout", "notes", "order", "deptorder", "deptsendout", "creater"]
    vlist.forEach(v => done(v))
  }

  (function appStart() {
    const { title } = baseConfig
    document.getElementById("page-title").innerHTML = title
    document.getElementById("header-title").innerHTML = title
    update()
  })()  
</script>

</html>